<template>
  <div id="qqqq" class="child-box">
    <div class="child-body" @click="checkDate">
      <div class="start-time">
        <p style="white-space: nowrap;">未选择</p>
      </div>
      <div style="width: 16px; height: 1px; background-color: white"></div>
      <div class="end-time" style="white-space: nowrap;">未选择</div>
      <el-icon size="16" style="margin-right: 17px" :color="'#e9e9eb'">
        <ArrowDown />
      </el-icon>
    </div>
    <div style="display: flex; flex-direction: row">
      <div v-show="showCheckDate" class="check-one">
        <div
          v-for="(item, index) in checkData"
          :key="index"
          class="one-content"
          @click="checkTime(item)"
        >
          <p style="margin-left: 16px" :style="{ color: item == nowCheck ? '#2B80ECFF' : '' }">{{
            item
          }}</p>
          <img
            v-show="item == nowCheck"
            style="margin-right: 20px"
            src="@/assets/images/components/customDatePicker/pitchOn.png"
          />
        </div>
        <div class="one-content" @click="checkCustom">
          <p style="margin-left: 16px">自定义时间</p>

          <el-icon size="16" style="margin-right: 20px" :color="'#e9e9eb'">
            <ArrowRightBold />
          </el-icon>
        </div>
      </div>
      <div v-show="customCheckShow" class="custom-check">
        <a-date-picker
          v-model="dateStart"
          format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="disabledDateStart"
          show-time
          :get-popup-container="getPopupContainer"
          style="width: 320px; height: 42px; margin-top: 20px; color: white"
          placeholder="请选择开始时间"
          @change="startChange"
        />
        <a-date-picker
          v-model="dateEnd"
          style="width: 320px; height: 42px; margin-top: 8px"
          format="YYYY-MM-DD HH:mm:ss"
          show-time
          :disabled-date="disabledDateEnd"
          placeholder="请选择结束时间"
          @change="endChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  export default defineComponent({
    setup() {
      const state = reactive({
        nowCheck: '0',
        customCheckShow: false,
        showCheckDate: false,
        dateStart: '',
        dateEnd: '',
        checkData: ['本周', '本月', '本季度', '本半年度', '本年度'],
      });
      const getPopupContainer = () => {
        console.log(document.getElementById('qqqq'), '测试是事实还是');
        return document.getElementById('qqqq');
      };
      const checkTime = (e) => {
        state.nowCheck = e;
        dateUtil(e);
        state.customCheckShow = false;
      };
      const checkCustom = () => {
        state.nowCheck = '自定义';
        state.showCheckDate = false
        state.customCheckShow = true;
      };
      const checkDate = () => {
        state.showCheckDate = !state.showCheckDate;
      };
      //时间计算
      const dateUtil = (type) => {
        const quarterOfYear = require('dayjs/plugin/quarterOfYear'); //dayjs 季度插件
        dayjs.extend(quarterOfYear);
        let val = {};
        switch (type) {
          case '本周':
            data = {
              startTime: dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
            };
            break;
          case '本月':
            val = {
              startTime: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
            };
            break;
          case '本季度':
            val = {
              startTime: dayjs().startOf('quarter').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('quarter').format('YYYY-MM-DD HH:mm:ss'),
            };
            break;
          case '本半年度':
            const month = dayjs().month();
            if (month <= 6) {
              // 上半年
              val = {
                startTime: dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
                endTime: dayjs().endOf('year').subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss'),
              };
            } else {
              // 下半年
              val = {
                startTime: dayjs().startOf('year').add(6, 'month').format('YYYY-MM-DD HH:mm:ss'),
                endTime: dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss'),
              };
            }
            break;
          case '本年度':
            val = {
              startTime: dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss'),
            };
            break;
          default:
            break;
        }
        return val;
      };
      const disabledDateStart = (current) => {
        if (state.dateEnd) {
          return current > dayjs(state.dateEnd).endOf('day');
        }
      };
      const disabledDateEnd = (current) => {
        console.log(1);
        if (state.dateStart) {
          return current < dayjs().endOf('day');
        }
      };
      const startChange = (e) => {
        state.dateStart = e;
      };
      const endChange = (e) => {
        state.dateEnd = e;
      };
      return {
        ...toRefs(state),
        checkTime,
        checkCustom,
        checkDate,
        disabledDateStart,
        disabledDateEnd,
        startChange,
        endChange,
        getPopupContainer,
      };
    },
  });
</script>
<style lang="less" scoped>
  .child-box {
    width: 100%;
    height: 100%;

    .child-body {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      .start-time {
        flex: 1;
        color: white;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      .end-time {
        flex: 1;
        color: white;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
    }
    .check-one {
      background: url(@/assets/images/components/customDatePicker/bg1.png) no-repeat;
      width: 490px;
      height: 272px;
      z-index: 999;
      margin-top: 15px;
      .one-content {
        width: 490px;
        height: 42px;
        display: flex;
        color: #ffffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: rgba(26, 144, 255, 0.3);
        }
      }
    }
    .custom-check {
      background: url(@/assets/images/components/customDatePicker/bg2.png) no-repeat;
      width: 360px;
      height: 460px;
      position: absolute;
      margin-left: 500px;
      margin-top: 219px;
      z-index: 1030;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  :deep .ant-picker:hover {
    border: 1px solid rgba(255, 255, 255, 0);
    border-right-width: 0;
  }
  :deep .ant-picker-focused {
    border: 1px solid rgba(255, 255, 255, 0);
    border-right-width: 0;
  }
  :deep .ant-picker {
    background-color: #3d618a54;
    border: 1px solid rgba(0, 0, 0, 0);
  }
  :deep .ant-picker-input > input {
    color: white;
  }
  :deep .ant-picker-panel-container {
    background: url(@/assets/images/components/customDatePicker/bg1.png) no-repeat;
    background-size: 100% 100%;
  }
  :deep .ant-picker-content th {
    color: white !important;
  }
  :deep .ant-picker-cell {
    color: #acacac;
  }
  :deep .ant-picker-cell-in-view {
    color: white;
  }
  :deep .ant-picker-datetime-panel .ant-picker-time-panel {
    border-left: 1px solid #60aaff;
  }
  :deep .ant-picker-header {
    color: white;
    border-bottom: 1px solid #60aaff;
    .ant-picker-next-icon {
      color: white;
    }
    .ant-picker-super-prev-icon {
      color: white;
    }
    .ant-picker-prev-icon {
      color: white;
    }
    .ant-picker-super-next-icon {
      color: white;
    }
  }
  :deep .ant-picker-panel .ant-picker-footer {
    border-top: 1px solid #60aaff;
    border-bottom: 0px solid #60aaff;
  }
  :deep .ant-picker-today-btn {
    color: white;
  }
  :deep .ant-picker-today-btn {
    background-color: #ffffff00 !important;
  }
  :deep
    .ant-picker-time-panel-column
    > li.ant-picker-time-panel-cell-selected
    .ant-picker-time-panel-cell-inner {
    background: #1890ff !important;
  }
  :deep
    .ant-picker-time-panel-column
    > li.ant-picker-time-panel-cell
    .ant-picker-time-panel-cell-inner {
    color: white;
  }
</style>
